
"use client"
import React, { use } from 'react'
import { usePathname } from 'next/navigation';
import Link from 'next/link';

const LinkData = [
    { name: "Performance", path: "/performance" },
    { name: "Reliability", path: "/reliability" },
    { name: "Scale", path: "/scale" },
]
export default function Header() {
    const pathName = usePathname();
    return (
        <div className="absolute w-full z-10 items-center">
            <div className="flex justify-between container mx-auto p-8">
                <Link href="/" className="text-3xl font-bold">HOME</Link>
                <div className="text-xl space-x-4">
                    {
                        LinkData.map((item, index) => (
                            <Link key={index} href={item.path} className={pathName === item.path ? "text-purple-500" : ""}>
                                {item.name}
                            </Link>
                        ))
                    }
                </div>
            </div>
        </div>

    )
}
